<!--
 * @FilePath: /my-map-demo/src/views/chart-types/components/GridMap.vue
 * @Author: 张文鑫
 * @Date: 2024-03-21 09:29:33
 * @Description: 栅格图组件
-->
<template>
  <MapBase :layers="[gridLayer]" />
</template>

<script setup>
import MapBase from "../MapBase.vue";
import ImageLayer from "ol/layer/Image";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import buildingData from "../data/heatMapData.json";

// 默认范围（可以根据实际需求调整）
const defaultExtent = [120.1, 30.2, 120.2, 30.3];

// 计算数据范围
const extent = buildingData?.features?.length
  ? [
      Math.min(...buildingData.features.map((f) => f.geometry.coordinates[0])),
      Math.min(...buildingData.features.map((f) => f.geometry.coordinates[1])),
      Math.max(...buildingData.features.map((f) => f.geometry.coordinates[0])),
      Math.max(...buildingData.features.map((f) => f.geometry.coordinates[1])),
    ]
  : defaultExtent;

// 创建栅格图层
const gridLayer = new TileLayer({
  source: new OSM(),
  opacity: 0.7,
});
</script>
